<header class="header" id="app">
	<div class="header_upper">
		<div class="welcome">
			<div class="welcome_icon">
				<img src="static/icon1.png"/>
				<span class="welcome_words" id="websiteName"></span>
			</div>
			<div class="welcome_fun">
				<div class="welcome_sign_in" id="notLoggedIn">
					<a href="login.html"><span>登录</span></a>
					<!-- <span class="welcome_division">|</span>
					<a href="login.html"><span>注册</span></a> -->
				</div>
				<div class="welcome_sign_in" id="loggedIn" style="display: none;">
					<a href="contact_us.html?name=HYZX"><span class="phone" ></span></a>
					<span class="welcome_division">|</span>
					<span id="onexit">退出</span>
				</div>
			</div>
		</div>
	</div>
	<div class="header_lower">
		<div class="nav">
			<a href="index.html">
				<div class="nav_logo">
					<img id="websiteLogo" src="./static/logo.png" />
				</div>
			</a>
			<div class="search">
				<div class="search_input">
					<img src="static/icon2.png">
					<input id="search" placeholder="书名/作者/ISBN/内容"/>
				</div>
				<div class="search_but" id="onSearch">搜索</div>
				<a href="search.html?name=TSZX&content="><div class="search_advanced">高级搜索</div></a>

			</div>
		</div>
	</div>
	<div class="header_nav">
		<div class="nav_menv">
			<div class="nav_menva">
				<a href="index.html?name=SY" id="SY">首页</a>
			</div>
		</div>
	</div>
	
</header>


<script>
	var curName;
	var token = '';
	if(sessionStorage.getItem("token")){
		token = sessionStorage.getItem("token");
	}else{
		if(window.location.href.split("&")[1]){
			token = window.location.href.split("&")[1].split("=")[1];
			console.log("token",token)
			sessionStorage.setItem("token", token);
		}
	}
	$.ajax({
		type: "get",
		url: "http://dbs.wutp.com.cn/CM-API/memberApi/auth/getPhoneCheckCode",
		headers: {
			'token':token,
		},
		async: false,
		success: function (res) {
			console.log("用户信息",res);
			if(res.code==200){
				$('#notLoggedIn').css('display','none');
				$('#loggedIn').css('display','block');
				$('.phone').text(res.data.nickName)
			}

		}
	})


	$(function(){
		$.ajax({
			type: "get",
			url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getNavigationBar?code=NavigationBar",
			dataType: "json",
			async: false,
			success: function (res) {
				var hadList = res.data;
				for(var i=0;i<hadList.length;i++){
					curName = hadList[i].code;
					var name = window.location.href.split("&")[0].split("=")[1];
					$(".nav_menv").each(function(){
						
						var id = $('.nav_menva a').attr('id');
						if(id==name){
							$('#'+id).addClass('cur')
						}
						
						if(name==curName){
							$(this).append(
								"<div class='nav_menva'><a href='"+hadList[i].remark+"' id="+hadList[i].code+" class='cur'>"+hadList[i].value+"</a></div>"
							)
						}else{
							$(this).append(
								"<div class='nav_menva'><a href='"+hadList[i].remark+"' id="+hadList[i].code+" class=''>"+hadList[i].value+"</a></div>"
							)
						}
					});
				}
			}
		});
		
		$.ajax({
			type: "get",
			url: "http://dbs.wutp.com.cn/CM-API/homePageApi/getWebsiteConfig",
			dataType: "json",
			async: false,
			success: function (res) {
				console.log("获取logo、出版社名称、色调",res);
				console.log()
				let websiteName = res.data.websiteName;
				let websiteLogo = res.data.websiteLogo;
				$('#websiteName').text('您好，欢迎进入'+websiteName+'网站');
				$('#websiteLogo').attr('src','http://dbs.wutp.com.cn/CM-API'+websiteLogo);
				if (res.data.color==3) {
				    var gray='grayscale(100%)';
				    $("html,body").css({"filter":'gray !important;',"filter":"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)","filter":gray,"-webkit-filter":gray,'-moz-filter':gray,'-ms-filter':gray,'-o-filter':gray});
				}
			}
		});
	})

	// 搜索书
	$("#onSearch").click(function(){
		let val = $("#search").val();
		if(!val){
			alert("请输入书名/作者/ISBN/内容");
			return
		}
		const url = "search.html?name=TSZX&content="+val
		window.location.href = url
	});
	
	// 搜索书
	$("#onexit").click(function(){
		sessionStorage.setItem("token", '');
		window.location.href="index.html?name=SY";
	});
	$("#phone").click(function(){
		window.location.href="contact_us.html";
	});

</script>

<style>
	.header {
		width: 100%;
	}

	.header_upper {
		background-color: #edeef0;
	}

	.welcome {
		height: 0.5rem;
		margin: 0 3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.welcome_icon{
		display: flex;
		align-items: center;
	}
	.welcome_icon img{
		width: 0.18rem;
		margin-right: 0.1rem;
	}	
	.welcome_words {
		font-size: 0.13rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 0.13rem;
	}

	.welcome_fun {
		display: flex;
		align-items: center;
	}

	.welcome_sign_in span {
		font-size: 0.13rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999;
		line-height: 20px;
		cursor: pointer;
	}
	
	.welcome_sign_in img{
		width: 0.12rem;
	}

	.welcome_division {
		margin: 0 0.04rem;
	}

	.header_lower {
		background-color: #fff;
	}

	.nav {
		height: 1.2rem;
		background-color: #fff;
		margin: 0 3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav_logo {
		width: 3rem;
		display: flex;
		align-items: center;
	}

	.nav_logo img {
		width: 100%;
	}
	.search{
		
		display: flex;
		align-items: center;
	}
	.search_input{
		display: flex;
		align-items: center;
		border: 0.01rem solid #dbdbdb;
		width: 3rem;
		height: 0.5rem;
		background-color: #fff;
		padding:0 0.1rem;
	}
	.search_input img{
		width: 0.24rem;
		margin-right: 0.08rem;
	}
	.search input{
		border: none;
		font-size: 0.16rem;
		line-height: 0.16rem;
	}
	
	.search_but{
		width: 0.8rem;
		height: 0.52rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #213051;
		color: #fff;
		font-size: 0.18rem;
		line-height: 0.18rem;
		margin-right: 0.15rem;
		cursor: pointer;
	}
	.search_advanced{
		width: 1.12rem;
		height: 0.52rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ae0e16;
		color: #fff;
		font-size: 0.18rem;
		line-height: 0.18rem;
	}
	
	.header_nav{
		background-color: #213051;
		padding: 0 3rem;
	}
	.nav_menv{
		height: 0.6rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav_menva{
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav_menv a {
		/* margin: 0 0.2rem; */
		font-size: 0.16rem;
		line-height: 0.16rem;
		padding: 0 0.2rem;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cur{
		background-color: #ae0e16;
		height: 100%;
	}
	
	.ewmimg{
		display: none;
		position: absolute;
		top: 0.5rem;
		right: -0.17rem;
	}
</style>
